<template>
	<div class="addImg w944">
		<alert ref="alert"></alert>
		<div class="label_top">
			<p><i class="line"></i>{{updateTitle}}</p>
		</div>
		<div class="addCont">
			<div class="addName marB"><span>图片、视频名称：</span>
				<el-input placeholder="请输入图片、视频名称..." v-model="name"></el-input>
			</div>
			<div class="addsome marB clearFix">
				<span style="float: left;">缩略图：</span>
				<div class="allImg" style="position: relative;">
					<el-upload class="avatar-uploader" refs="uploadxls" action="http://www.h3clearning.com/huathree-back/uploadFile" :headers="myHeaders" :show-file-list="false" :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess">
					  <img v-if="imageUrl" :src="imageUrl" class="avatar">
					  <i v-else class="el-icon-plus avatar-uploader-icon"><b style="display:block;font-weight:normal"><em>上传图片</em></b></i>
					</el-upload>
				</div>
			</div>
			<div class="addSubTuijian marB">
				<span>功能选项：</span>
				<el-select v-model="type" placeholder="请选择功能..." @change="checkItem">
					<el-option v-for="(item,index) in option" :key="index" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</div>
			<div class="addName marB text"><span>URL地址：</span>
				<el-input placeholder="请输入web页连接地址……" v-model="linkurl" :readonly="(this.type == 4||this.type==5)?false:true"></el-input>
			</div>
			<div class="addsome marB clearFix">
				<span style="float: left;position: relative;">上传图片：</span>
				<div class="allImg">
					<el-upload action="###" :headers="myHeaders" list-type="picture-card" :file-list="imgManageChildrenVoList" :limit="6" :on-remove="handleRemove" :on-exceed="maxLimit" :show-file-list="true" :http-request="uploadImgList" >
					  	<i class="el-icon-plus"><b>上传图片</b></i>
					</el-upload>
					<el-dialog :visible.sync="dialogVisible">
					  <img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>
				</div>
			</div>
			<!-- 此处放视频，没有继续添加功能start -->
			<div class="addsome marB clearFix" style="position: relative;height: auto;">
				<span style="float: left;">启动视频：</span>
				<em v-model="videoName"  class="ceshiNm" style="position: absolute;top: -5px;left: 220px;background: #fff;display: block;width: 94px;height: 40px;color:#000;z-index:999;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height:32px">{{videoName}}</em>
				<input type="file" id="fileUpload" @change="fileChange($event)" class="upload-demo" style="width: 183px;">
				<span v-show="guanbi" @click="refrash()" style="font-size: 18px;color: #666;width:auto!important;cursor: pointer;">&#10005;</span>
			</div>
			<!-- 此处放视频，没有继续添加功能end -->
			<div  class="addSwitch"><span style="width: 128px;text-align: right;display: inline-block;">状态：</span>
				<el-switch v-show="stateFlag" class="switchStyle visible" v-model="state" active-color="#44cef6" inactive-color="#999" :active-value="1" :inactive-value="0" active-text="开启" inactive-text="关闭" ></el-switch>
			</div>
			<div class="footerButton">
				<a @click="checkSave" v-bind:style="{background: clickLock==true ? '#44CEF6' : '#3a8ee6'}">保存</a>
				<a @click="cancel" class="cancel">取消</a>
			</div>
		</div>
	</div>
</template>
<script>
	import alert from '../../components/Alert.vue';
	export default {
		data() {
			return {
				clickLock:true,
				nowType: 'add',
				switchValue:'',
				updateTitle: '',
				// 编辑绑定的内容start
				imageNum:0,//图片下标
				id:'',
				name: "",
				imageUrl:'',
				type:'',
				videourl:'',
				linkurl:'',
				state:0,
				stateFlag:false,
				imgManageChildrenVoList:[],
				//多图
				dialogImageUrl: '',
				dialogVisible: false,
				//视频
				file:'',
				videoName:'',
				guanbi:false,
				// 编辑绑定的内容end
				option: [{
					value: 1,
					label: '启动视频'
				}, {
					value: 2,
					label: '启动引导图'
				},{
					value: 7,
					label: 'IOS分享图'
				},{
					value: 6,
					label: 'Android分享图'
				},{
					value: 4,
					label: '滚动图web页连接'
				},{
					value: 5,
					label: '启动页web页连接'
				}],
				nameBlock:false,
				myHeaders:{Authorization:this.$root.userInfoMsg.sessionId}
			}
		},
		methods: {
			refrash() {                				
				document.getElementById("fileUpload").value=''; //第一行点X，就吧input 框值设为空
				this.videoName='';  
				this.guanbi=false;  
			},
			getParams() {
				var routerParams = this.$route.params.type;
				if(routerParams == 'edit') {
					this.nowType = 'edit';
					this.updateTitle = "编辑图片/视频";
				} else {
					this.stateFlag=true;
					this.nowType = 'add';
					this.updateTitle = "添加图片/视频";
				}
			},
			//深复制对象方法    
            cloneObj (obj) {  
                var newObj = {};  
                if (obj instanceof Array) {  
                    newObj = [];  
                }  
                for (var key in obj) {  
                    var val = obj[key];  
                    newObj[key] = typeof val === 'object' ? this.cloneObj(val): val;  
                }  
                return newObj;  
            },
			newAdd() {
				//新增商品
				let that = this;
				var arrayList=this.cloneObj(that.imgManageChildrenVoList);
				arrayList.forEach(element => {
					element.imgurl=element.url
					delete element.url;
					delete element.status;
					delete element.uid;
				});
				let newDetail = {
					rootcompanyid:1,
					name: that.name,
					thumbnail: that.imageUrl,
					type: that.type,
					videourl: that.videourl,
					linkurl: that.linkurl,
					state: that.state,
					imgManageChildrenVoList:arrayList
				};
				if(this.clickLock==true){
					this.clickLock=false;
					this.$ajax({
						url: this.$root.jifuUrl + '/mns/imgManage/addImgManage',
						headers:{'ContentType': 'application/json; charset=utf-8'},
						data: newDetail,					
						method: 'POST',
						success: res => {
							if(res.data.code == 200) {
								this.$refs.alert.show({alertText: '保存成功'});
								setTimeout(() =>{
									this.$router.push({
										name:'imgGuanli'
									});
								},2000)
							}else{
								this.clickLock = true;
								this.failText = res.data.message;
								this.$rootFunction().deleteResFail();
							}
						}
					});
				}
			},
			editnews() {
				let that = this;
				var arrayList=this.cloneObj(that.imgManageChildrenVoList);
				arrayList.forEach(element => {
					element.imgurl=element.url
					delete element.url;
					delete element.status;
					delete element.uid;
				});
				let editDetail = {
					id:that.id,
					rootcompanyid:1,
					name: that.name,
					thumbnail: that.imageUrl,
					type: that.type,
					videourl: that.videourl,
					linkurl: that.linkurl,
					state: that.state,
					imgManageChildrenVoList:arrayList
				};
				this.$ajax({
					url: this.$root.jifuUrl + '/mns/imgManage/updateImgManage',
					headers:{'ContentType': 'application/json; charset=utf-8'},
					data: editDetail,					
					method: 'PUT',
					success: res => {
						if(res.data.code == 200) {
							this.$refs.alert.show({alertText: '保存成功'});
							setTimeout(() =>{
								this.$router.push({
									name:'imgGuanli'
								});
							},2000)
						}else{
							this.clickLock = true;
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				});
			},
			checkSave() {
				if(this.nowType == 'add') {
					this.newAdd();
				} else if(this.nowType == 'edit') {
					this.editnews();
				}
			},
			cancel() {
			    this.$router.go(-1);
			},
			checkItem() {
				if(this.type != 4) {
					this.linkurl = '';
				} else {
					this.linkurl = this.linkurl;
				}
			},
			handleAvatarSuccess(res, file) {
				if(res.code == 200) {
					this.imageUrl = res.data[0];
				};
			},
			beforeAvatarUpload(file) {
				const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png');
				const isLt2M = file.size / 1024 / 1024 < 2;
				if(!isLt2M) {
					this.$message.error('上传图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},
			handleRemove(file, fileList) {
				console.log(file, fileList);
				this.imgManageChildrenVoList.forEach(function(item, index, arr) {
					if(item.uid == file.uid) {
						arr.splice(index, 1);
					}
				});
		    },
		    handlePictureCardPreview(file) {
		        this.dialogImageUrl = file.url;
		        this.dialogVisible = true;
			},
			maxLimit(files, fileList){
				alert("图片图多传6张");
			},
		    uploadImgList(item){
				let formData = new FormData()
				formData.append('file', item.file)
				this.$ajax({
					url: "http://www.h3clearning.com/huathree-back/uploadFileBackObject",
					data: formData,
					method: 'POST',
					success: res => {
						this.imgManageChildrenVoList.push({pictureName:item.file.name,url:res.data.data[0].path});
					}
				})
			},
			fileChange(e) {
				this.file = e.target.files[0]
				if(!this.file) {
					alert("请先选择需要上传的文件!")
					return
				}
				this.videoName=this.file.name;
				let formData = new FormData()
				formData.append('file', this.file)
				this.$ajax({
					url: "http://www.h3clearning.com/huathree-back/uploadFile",
					data: formData,
					method: 'POST',
					success: res => {
						this.videourl=res.data.data[0];
						this.guanbi=true;
					}
				})
			}
		},
		components: {
			alert
		},
		mounted() {
			this.getParams();
			if(this.nowType == "edit") {
				console.log('306', this.nowType, this.$root.imgGuanLiMsg);
				this.id = this.$root.imgGuanLiMsg.id;
				this.name = this.$root.imgGuanLiMsg.name;
				this.imageUrl = this.$root.imgGuanLiMsg.thumbnail;
				this.type = this.$root.imgGuanLiMsg.type;
				this.linkurl = this.$root.imgGuanLiMsg.linkurl;
				this.videourl = this.$root.imgGuanLiMsg.videourl;
				this.state = this.$root.imgGuanLiMsg.state;
				this.stateFlag=true;
				this.imgManageChildrenVoList=this.$root.imgGuanLiMsg.imgManageChildrenVoList;
				this.imgManageChildrenVoList.forEach(element => {
					element.url=element.imgurl
					delete element.imgurl;
				});
				if(this.videourl!=null&&this.videourl!=''){
					console.log(this.videourl);
					this.videoName=	this.videourl.substring(this.videourl.lastIndexOf("/")+1,this.videourl.length);
					this.guanbi = true;
				}else if(this.videourl==null || this.videourl=='' || this.videourl==undefined){
					console.log(this.videourl);
					this.guanbi = false;
				}
			};
		}
	}
</script>

<style>
	[v-cloak]{display: none!important; }
	.addImg{padding-bottom:100px}
	.addImg .updownvideo {
		position: absolute;
		top: 0;
		left: 100px;
	}
	
	.telPhone .el-form-item__label {
		font-size: 16px;
		color: #333;
		text-align: left;
		padding: 0;
	}
	
	.el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before,
	.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
		display: none;
	}
	
	.telPhone input {
		width: 217px;
		height: 34px;
		line-height: 34px;
		font-size: 14px;
		color: #333;
	}
	
	.addImg .addSubVideolist .updownvideo,
	.addImg .addSubVideolist .avatar-uploader,
	.addImg .addSubVideolist .avatar-uploader .el-upload,
	.addImg .addSubVideolist .avatar-uploader-icon {
		width: 170px;
		height: 84px;
	}
	
	.addImg .avatar-uploader {
		width: 100px;
		height: 100px;
	}
	
	.addImg .el-button--primary.is-active,
	.addImg .el-button--primary:active {
		background: #44CEF6;
		border: none
	}
	
	.addImg .el-button--small,
	.addImg .el-button--small.is-round {
		padding: 0;
	}
	
	.addImg .upload-demo span {
		border: none;
		font-size: 14px!important;
		color: #fff!important;
	}
	
	.addImg .upload-demo .el-button {
		border: none;
	}
	
	.addImg .addSubVideo,
	.addSubVideolist {
		height: 117px!important;
		position: relative;
	}
	
	.addSubVideo .el-upload-list {
		position: absolute;
		top: 0;
		left: 126px;
	}
	
	.addImg .el-upload-list__item-name {
		font-size: 14px;
		color: #333;
	}
	
	/* .addImg .el-upload-list__item:first-child {
		margin-top: 5px;
	} */
	
	.addImg .el-button {
		background: #44CEF6;
		height: 33px;
		line-height: 33px;
		width: 100px;
		display: inline-block;
		padding: 0;
		border: 0;
		margin-top: 135px;
	}
	
	.addImg .el-button:hover {
		background: #31c7f2;
	}
	
	.addImg .el-select input[type="text"] {
		height: 34px!important;
		width: 155px;
	}
	
	.addImg .el-input__icon {
		line-height: 35px;
	}
	
	.addImg .avatar-uploader .el-upload {
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		width: 100px;
		height: 100px;
	}
	
	.addImg .avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}
	
	.addImg .avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 100px;
		height: 100px;
		text-align: center;
		background: #f2f2f2;
		padding-top: 22px;
	}
	
	.addImg .avatar-uploader-icon b {
		color: #ccc;
		display: block;
		font-weight: normal;
		font-size: 14px;
		margin-top: 3px;
	}
	
	.addImg .avatar {
		width: 100px;
		height: 100px;
		display: block;
	}
	
	.addImg .addName span,
	.addImg .addSubVideo span,
	.addImg .addsome span,
	.addImg .addSubVideolist span,
	.addImg .addSubTuijian span,
	.addImg .skillContainer span,
	.addImg .addTime span,
	.addImg .addSubJieshao span{
		width: 136px;
		display: inline-block;
		text-align: right;
	}
	.addImg .addTime .el-date-editor input{width: 216px;height: 34px;line-height: 34px;}
	.addImg .addTime span.el-input__prefix,.addImg .addTime span.el-input__suffix i{width: 20px;color:#ccc;}
	.el-date-editor.el-input, .el-date-editor.el-input__inner{width:216px;}
	.addImg .addTime em{width: 36px;display: inline-block;color: #ccc;}
	.addImg .addSubVideo span,
	.addSubVideolist span {
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.addImg .addName .el-input,
	.addImg .addName .el-input input {
		width: 217px;
		height: 34px;
		display: inline-block;
		font-size: 14px;
		color: #333;
	}
	
	.addImg .addName.from .el-input,
	.addImg .addName.from .el-input input {
		width: 146px;
	}
	
	.addImg .addName.enterprise .el-input,
	.addImg .addName.enterprise .el-input input {
		width: 217px;
	}
	
	.addImg .addName.text .el-input,
	.addImg .addName.text .el-input input {
		width: 217px;
	}
	
	.addImg .addName.zhuce em {
		font-size: 14px;
		color: #333;
		font-style: normal;
	}
	
	.addImg span {
		font-size: 16px;
		color: #333;
	}
	
	.addImg .updownvideo em ,.addImg .addsome em {
		font-style: normal;
		font-size: 12px;
		color: #ccc;
		margin-top: 8px;
		display: block;
		line-height: 16px;
	}
	
	.addImg .teacherSkills {
		position: relative;
		height: 34px;
		line-height: 34px;
		margin-bottom: 10px;
	}
	
	.addImg .skillDetail {
		width: 450px;
		height: 32px;
		line-height: 32px;
		border: 1px solid #ccc;
		border-radius: 5px;
		position: absolute;
		top: 0;
		left: 101px;
	}
	
	.addImg .skillDetail i {
		font-style: normal;
		color: #ccc;
		position: relative;
		top: -4px;
		margin-left: 4px;
		cursor: pointer;
	}
	
	.addImg .skillDetail span,
	.addImg .skillContent span {
		color: #44CEF6;
		font-size: 14px;
		width: auto!important;
		margin-left: 15px;
		cursor: pointer;
	}
	
	.addImg .skillContent {
		margin-left: 87px;
	}
	
	.addName {
		position: relative;
	}
	
	.addName .select-box {
		width: 300px;
		position: absolute;
		top: 0;
		left: 101px;
	}
	
	.addName .select-box span {
		text-align: left;
		width: 65px;
		margin-right: 5px;
	}
	
	.addName .select-box select {
		width: 100%;
		height: 32px;
		line-height: 32px;
		border: 1px solid #ccc;
		font-size: 14px;
		color: #333;
		border-radius: 5px;
	}
	
	.addCont .el-select input {
		font-size: 14px!important;
	}
	.addsome{height: 100px;overflow: hidden;}
	.allImg{display: inline-block;margin-left: 5px;}
	.allImg .el-upload--picture-card{line-height: 100px;}
	.allImg .el-upload,.allImg .el-upload-list__item.is-success{width: 100px!important;height: 100px;border: none;background: #f2f2f2;overflow: hidden;margin-top: 0}
	.allImg .el-upload-list{width: 100px!important;background: #fff;}
	.allImg .el-upload i{padding-top: 23px;}
	.allImg .el-upload b{font-size: 14px;font-weight: normal;color: #ccc;display: block;margin-top: 5px;}
	.allImg .el-upload-list__item,.el-upload-list.el-upload-list--picture-card,.el-upload-list__item-thumbnail {
      transition: none !important;
      width: 100px!important;height:100px;border: 0;
    }
	.allImg .el-upload-list__item-preview,.allImg .el-upload-list__item-delete{width: 0;height: 0}
	.el-dialog{width: 30%!important}
	.edui-editor-breadcrumb span{width: auto!important}
	.addSubJieshao label{margin-right: 30px;color: #333;}
	.addSubJieshao label input{margin-right: 5px;}
	/* .el-upload-list--picture-card .el-upload-list__item-actions:hover{opacity: 0;}
	.el-upload-list__item.is-success .el-upload-list__item-status-label{display: none;} */
	.addImg .addsome span.el-upload-list__item-delete{width: 100px;height:100px;left: 0;top: 0;position: absolute}
	.addImg .addsome span.el-upload-list__item-delete i{line-height: 100px!important;margin: 0 auto;width: 20px;
    display: block;position: absolute;left: 40px}
	.footerButton a{width: 100px;height: 34px;line-height: 34px;display: inline-block;font-size: 14px;margin-top: 165px;background: #44CEF6;color:#fff;border-radius: 4px;text-align: center;margin-left: 304px;cursor: pointer;}
	.footerButton a.cancel{margin-left: 208px;background: #ccc;}
	.el-radio__input,.el-radio__inner{width: 14px!important;}
	.el-radio__label{width: auto!important;}
	.addImg .el-radio__input.is-checked .el-radio__inner{color:#ccc;background: #ccc;border-color:#ccc}
	.addImg .el-radio__input.is-checked+.el-radio__label{color:#333;}
	.addImg .el-radio__inner:hover{border: 1px solid #ccc;}
	
	.addImg .switchStyle.visible span.el-switch__label--left {
	  z-index: 9;
	  left: 20px;top: 1px;
	}
	.addImg .switchStyle.visible span.el-switch__label--right {
	  z-index: 9;
	  left: -6px;top: 1px;
	}
</style>